<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态创建表格</title>
</head>

<body>
    <table align="center" cellspacing=0px border="1px" width="300px">
        <thead>
            <th>姓名</th>
            <th>性别</th>
        </thead>
        <tbody id="content"></tbody>
    </table>
</body>

</html>
<script>
    let data = [{
        name: '李昊哲',
        gender: 1
    }, {
        name: '刘晓兰',
        gender: 0
    }, {
        name: 'phoenix',
        gender: 1
    }, {
        name: '小兰兰',
        gender: 0
    }, ];
    let tbody = window.document.querySelector('#content');
    for (const person of data) {
        let tr = window.document.createElement('tr');
        tbody.appendChild(tr);
        for (const key in person) {
            let td = window.document.createElement('td');
            if (key == 'gender') {
                td.innerText = person[key] == 1 ? '俊男' : '靓女';
            } else {
                td.innerText = person[key];
            }
            tr.appendChild(td);
        }
    }
</script>